<template>
  <view>
    <view class="tel_content">
      <view class="mt_phone_left">
        <u-icon name="info-circle" size="18" color="#FD7C22"></u-icon>
        <view v-if="tel" class="mt_phone_text">本单必须使用美团账号{{ tel }} 下单,否则无效!</view>
        <view v-else class="mt_phone_text">你还没有绑定美团账号,请先绑定美团账号，再下单,否则无效!</view>
      </view>
      <view @tap="openPop" class="mt_phone_right">
        <u-icon name="edit-pen" size="18" color="#888888"></u-icon>
        <text class="edit">{{ tel ? '修改账号' : '去绑定'}}</text>
      </view>
      <!--<view class="tel_text">
        <text>本单报名手机号：</text>
        <text class="tel">{{ tel || '请绑定美团手机号' }}</text>
      </view>
      <view @tap="openPop">
        <image src="https://lsz.lszbg.com/imgs/guanfan/detail/edit.png"></image>
        <text class="edit">{{ tel ? '修改' : '去绑定'}}</text>
      </view>-->
    </view>
  </view>
  <u-popup :show="phonePop" mode="center" :safeAreaInsetBottom="false" round="10" @close="close">
    <view class="wm_box">
      <view class="content_boxs">
        <view class="know_t">修改美团账号手机号</view>
        <view class="desc_text">
          <text style="color: #FF3E00;font-size: 26rpx;">新手机号需与美团绑定手机号一致</text>
        </view>
        <view style="margin-left: 30rpx;margin-top: 10rpx;font-size: 28rpx">手机号</view>
        <view class="input_name">
          <u-input border="none"
                   class="inputWidth"
                   type="number"
                   clearable
                   :customStyle="{background:'#F6F6F6','border-radius': 0,padding:'10rpx 20rpx'}"
                   placeholder="请输入手机号" v-model="tel"/>
        </view>
        <view class="tip" style="position: relative">
          <!-- #ifdef H5 -->
          <wx-open-launch-weapp id="launch-btn"
                                username="gh_870576f3c6f9" path="mt/pages/setting/setting.html"
                                style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
            <component :is="'script'" type='text/wxtag-template' style="display: block;">
              <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
            </component>
          </wx-open-launch-weapp>
          <!-- #endif -->
          <text>您也可以前往我的-设置-关联美团手机号进行修改。</text>
          <text style="color: #ff7400;" @click="toMTSetting">点击查看美团绑定的手机号</text>
        </view>
        <view class="btns_con">
          <view style="flex: 1"></view>
          <button class="zbbm" @click="close">取消修改</button>
          <button class="submit" @click="submitTel(0)">确认修改</button>
        </view>
      </view>
    </view>
  </u-popup>
  <u-popup :show="showBDTel" mode="center" :safeAreaInsetBottom="false" round="10">
    <view class="wm_box">
      <view class="content_boxs">
        <view class="know_t">关联美团手机号</view>
        <view class="desc_text">
          请填写
          <text style="color: #FF3E00">美团登录账号绑定的手机号码，</text>
          用于核对美团 订单信息，填写错误将无法获得美团订单返利，无法访问官返商家列表。
        </view>
        <view class="input_name">
          <u-input border="none"
                   class="inputWidth"
                   type="number"
                   clearable
                   :customStyle="{background:'#F6F6F6','border-radius': 0,padding:'10rpx 20rpx'}"
                   placeholder="请输入手机号" v-model="tel"/>
        </view>
        <view class="tip">
          绑定成功后，您可以前往我的-设置-美团授权手机号 进行修改，也可以在当前页面修改。
        </view>
        <view class="btns_con">
          <view style="flex: 1"></view>
          <button class="zbbm" @click="closePop">暂不绑定</button>
          <button class="submit" @click="submitTel(1)">确认绑定</button>
        </view>
      </view>
    </view>
  </u-popup>
</template>
<script setup>
import {ref, onMounted} from "vue";
import {setMeiTuanTel} from "../../services/me";
import {useUserInfoStore} from "../../stores/modules/userInfo";
import {conUtils} from "../../utils/conUtils";
import {onShow} from "@dcloudio/uni-app";
import {toMiniAppSetting} from "../../utils/utils";

const phonePop = ref(false)
const showBDTel = ref(false)
const useUser = useUserInfoStore()
const tel = ref(useUser.userInfo.mt_phone)
const props = defineProps({
  tel: {
    type: String,
    default: ''
  }
})
const openPop = () => {
  if(tel.value){
    phonePop.value = true
  }else{
    showBDTel.value =true
  }
}
const hasTel = () => {
  if (!tel.value) {
    showBDTel.value =true
  }
  return tel.value
}
const closePop = () => {
  // emits('cancel')
  phonePop.value = false
  showBDTel.value = false
}
const close = () => {
  phonePop.value = false
  showBDTel.value = false
  tel.value = useUser.userInfo.mt_phone
}

onShow(()=>{
  tel.value = useUser.userInfo.mt_phone
})
onMounted(() => {
  tel.value = props.tel
  console.log('默认美团手机号tel==', props.tel, tel.value, useUser.userInfo.mt_phone)
})
const toMTSetting = () => {
  toMiniAppSetting(1)
}

const emits = defineEmits(['bindingSuccess', 'cancel'])
const submitTel = async (type) => {
  conUtils("tel", tel)
  if (!(/^1[0-9]{10}$/.test(tel.value + ""))) { // 使用正则表达式进行校验
    await uni.showToast({title: "手机号错误，请重新输入", icon: "none"})
  } else {
    // console.log("是有效的手机号", tel.value);
    closePop()
    await setMeiTuanTel(tel.value)
    await useUser.getUserInfo()
    if (type === 1) {
      emits('bindingSuccess', tel.value)
    }
    await uni.showToast({title: "绑定成功", icon: "none"})
  }
}
defineExpose({hasTel,openPop})

</script>

<style scoped lang="scss">
.tel_content {
  height: 80rpx;
  line-height: 80rpx;
  margin-top: 10rpx;
  display: flex;

  .mt_phone_left{
    flex: 1;
    display: flex;
    align-items: end;
    .mt_phone_text{
      font-size: 24rpx;
      color: #FD7C22;
      line-height: 34rpx;
      padding-left: 10rpx;
    }
  }
  .mt_phone_right{
    width: 140rpx;
    display: flex;
    align-items: center;
    .mt_phone_right_text{
      font-size: 24rpx;
      color: #888888;
      line-height: 34rpx;
    }
  }
  .tel_text {
    flex: 1;
  }

  image {
    height: 32rpx;
    width: 32rpx;
  }

  text {
    margin: auto 0;
    font-size: 26rpx;
    color: #888888;
  }

  .edit {
    font-weight: normal;
    color: #888888;
    font-size: 26rpx;
  }

  .tel {
    color: #FE5414;
  }
}

.divcolor {
  color: #666666;
}

.wm_box {
  position: relative;
  width: 600rpx;
  background: #ffffff;
  border-radius: 32.5rpx;
  margin: -186rpx auto 0;
}

.content_boxs {
  box-sizing: border-box;
  position: relative;

  .know_t {
    font-size: 32rpx;
    color: #000;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    margin-top: 6rpx;
    padding: 20rpx;
    border-bottom: 1px solid #eee;
  }

  .desc_text {
    box-sizing: border-box;
    padding: 30rpx 30rpx 0;
    font-size: 30rpx;
    color: #AAAAAA;
    line-height: 56rpx;
    text-align: left;

    text {
      color: #F97632;
      text-align: left;
    }
  }

  .tip {
    color: #BFBFBF;
    font-size: 24rpx;
    line-height: 36rpx;
    margin: 0 30rpx;
  }

  .input_name {
    margin: 20rpx 30rpx;
  }

  .btns_box {
    width: 280rpx;
    height: 64rpx;
    background: linear-gradient(270deg, #FEB85A 0%, #FC754A 100%);
    border-radius: 50rpx;
    font-size: 28rpx;
    color: #fff;
    line-height: 64rpx;
    text-align: center;
  }

  .btns_con {
    display: flex;
    justify-content: flex-end;
    font-size: 26rpx;
    margin: 20rpx 30rpx 30rpx;

    button {
      margin-left: 30rpx;
      font-size: 24rpx;
    }

    .zbbm {
      border-radius: 200rpx;
      width: 176rpx;
      background-color: #FFFFFF;
      border: #DDDDDD 1rpx solid;
      color: #999999;
    }

    .submit {
      border-radius: 200rpx;
      width: 176rpx;
      background: linear-gradient(131deg, #FC754A 0%, #FC754A 0%, #FEB95A 100%);
      color: #FFFFFF;
    }
  }
}
</style>
